<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ball{
            width: 50px;
            height: 50px;
            background-color: brown;
            border-radius: 50%;
            margin-bottom: 20px;
        }
    </style>
    <script src="./js/jquery-1.9.0.js"></script>
    <script>
        /*
            1、promise解决的问题：js代码运行过程中异步函数所构成回调嵌套问题（回调地狱）
                                 将异步嵌套产生的横向代码定义 转变为 纵向链式代码定义
            2、promise对象为独立对象，每次调用后该对象就完成自己的回调任务，
                     所以 promise then 或 catch 都会在回调执行后返回新的promise对象
                     以新的promise 对象完成 then和catch 链式定义
            3、then 和 catch 返回的promise的定义和修改
                a、then catch 回调函数无返回值 等效于 return Prmise.resolve(); 
                                                     return new Promise(function(resolve){ 
                                                         resolve() 
                                                    });
                b、then catch 回调函数定义 非 promise 对象放回值时 等效于 return Prmise.resolve(返回值); 
                                                                          return new Promise(function(resolve){ 
                                                                                resolve(返回值) 
                                                                            });
                c、then catch 回调函数定义 promise 对象时，
                        后续连写 then 和 catch 执行的实际取决于返回promise对象 resolve 和 reject 的调用实际
            4、每个promise对象都具有状态监控的操作：resolve 函数调用是将promise转换为 fulfilled 状态 -> Promise.resolve()
                                                  reject 函数的调用时将promise转换为 rejected 状态 -> Promise.reject()
                        then(callback1,callback2) callback1 对应的是 fulfilled 的回调结果
                                                  callback2 对应的是 rejected 的回调结果
                        catch(callback) callback 对应的是 rejected 的回调结果
                        如果promise对象构建完成后，未执行 reslove 或 reject 函数将处于中间状态 pending
        */
        let p = new Promise(function(reslove,reject){
            let num = Math.random();
            if(num>0.5){
                reslove("aaa");
            }else{
                reject();
            }
        });
        // console.log(p);
        p.then(function(a){
            console.log("then");
            asdasdasdas;
        }).catch(function(){
            console.log("catch");
        });
        // let p1 = p.then(function(){
        //     console.log(1);
        //     asdasdas;
        // });
        // console.log("p1:",p1);
        // let p2 = p1.then(function(){
        //     console.log(2);
        // })
        
    </script>
</head>
<body>
    <div class="ball" id="ball1" style="margin-left: 0px;"></div>
    <div class="ball" id="ball2" style="margin-left: 0px;"></div>
    <div class="ball" id="ball3" style="margin-left: 0px;"></div>
    <div class="ball" id="ball4" style="margin-left: 0px;"></div>
    <div class="ball" id="ball5" style="margin-left: 0px;"></div>
    <div class="ball" id="ball6" style="margin-left: 0px;"></div>
    <hr>
    <button onclick="moveBall()">运动</button>
    <button onclick="moveBallPromise()">运动</button>
    <button onclick="moveBallPromiseSync()">运动</button>


</body>
<script>
    let $ball1 = $("#ball1");
    let $ball2 = $("#ball2");
    let $ball3 = $("#ball3");
    let $ball4 = $("#ball4");
    let $ball5 = $("#ball5");
    let $ball6 = $("#ball6");

    function moveBall(){
        $ball1.animate({ "margin-left":"300px" },1000,function(){
            $ball2.animate({ "margin-left":"300px" },1000,function(){
                $ball3.animate({ "margin-left":"300px" },1000,function(){
                    $ball4.animate({ "margin-left":"300px" },1000,function(){
                        $ball5.animate({ "margin-left":"300px" },1000,function(){
                            $ball6.animate({ "margin-left":"300px" },1000,function(){
                                $ball6.animate({ "margin-left":"0px" },1000,function(){
                                    $ball5.animate({ "margin-left":"0px" },1000,function(){
                                        $ball4.animate({ "margin-left":"0px" },1000,function(){
                                            $ball3.animate({ "margin-left":"0px" },1000,function(){
                                                $ball2.animate({ "margin-left":"0px" },1000,function(){
                                                    $ball1.animate({ "margin-left":"0px" },1000)
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        })
    }

    function moveBallFun($dom,opt){
        return new Promise(function(resolve){
            $dom.animate(opt,1000,resolve)
        })
    }

    function moveBallPromise(){
        // let p = moveBallFun($ball1,{"margin-left":"300px"})
        // let p1 = p.then(function(){
        //     moveBallFun($ball2,{"margin-left":"300px"});
        //     return "asdasd"
        // });
        // let p1 = p.then(function(){
        //     moveBallFun($ball2,{"margin-left":"300px"});
        //     return new Promise(function(resolve){
        //         setTimeout(resolve,3000)
        //     });
        // });
        // let p1 = p.then(function(){
        //     return moveBallFun($ball2,{"margin-left":"300px"});
        // });
        // console.log(p === p1);
        // console.log(p1);
        // let p2 = p1.then(function(a){
        //     console.log(a);
        //     moveBallFun($ball3,{"margin-left":"300px"})
        // });
        moveBallFun($ball1,{"margin-left":"300px"})    
            .then(function(){
                return moveBallFun($ball2,{"margin-left":"300px"});
            })
            .then(function(){
                return moveBallFun($ball3,{"margin-left":"300px"})
            })
            .then(function(){
                return moveBallFun($ball4,{"margin-left":"300px"})
            })
            .then(function(){
                return moveBallFun($ball5,{"margin-left":"300px"})
            })
            .then(function(){
                return moveBallFun($ball6,{"margin-left":"300px"})
            })
            .then(function(){
                return moveBallFun($ball6,{"margin-left":"0px"});
            })
            .then(function(){
                return moveBallFun($ball5,{"margin-left":"0px"})
            })
            .then(function(){
                return moveBallFun($ball4,{"margin-left":"0px"})
            })
            .then(function(){
                return moveBallFun($ball3,{"margin-left":"0px"})
            })
            .then(function(){
                return moveBallFun($ball2,{"margin-left":"0px"})
            })
            .then(function(){
                return moveBallFun($ball1,{"margin-left":"0px"})
            })
    }

    async function moveBallPromiseSync(){
        await  moveBallFun($ball1,{"margin-left":"300px"});
        await  moveBallFun($ball2,{"margin-left":"300px"});
        await  moveBallFun($ball3,{"margin-left":"300px"});
        await  moveBallFun($ball4,{"margin-left":"300px"});
        await  moveBallFun($ball5,{"margin-left":"300px"});
        await  moveBallFun($ball6,{"margin-left":"300px"});
        await  moveBallFun($ball6,{"margin-left":"0px"});
        await  moveBallFun($ball5,{"margin-left":"0px"});
        await  moveBallFun($ball4,{"margin-left":"0px"});
        await  moveBallFun($ball3,{"margin-left":"0px"});
        await  moveBallFun($ball2,{"margin-left":"0px"});
        await  moveBallFun($ball1,{"margin-left":"0px"});
    }
</script>
</html>